<template>
    <view class="uni-tab-bar">
        <swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
			<!-- 科目一 -->
            <swiper-item v-for="(mm,index) in newsitems" :key="index">
                <scroll-view class="list" scroll-y>
					<view class="examination_title">
						<text class="text" v-if="mm.type==0">判断题</text>
						<text class="text" v-if="mm.type==1">选择题</text>
						<text class="timu">{{mm.question}}</text>
					</view>
					<view class="examination_choice">
						<checkbox-group @change="checkboxChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item2,index2) in mm.item" :key="index2">
								<view class="serial_index" :class="item2.checked=='true'?'active':''">
									<view class="serial_index_chil" >{{item2.key}}</view>
									<checkbox :value="item2.value" style="display: none;" />
								</view>
								<view>{{item2.value}}</view>
							</label>
						</checkbox-group>
					</view>
                </scroll-view>
            </swiper-item>
        </swiper>
		
		<view class="bottom" @tap="show">
			<view class="left">
				<icon class="iconfont icon-shoucang1"></icon>
				收藏
			</view>
			<view class="right">
				<view class="li">
					<icon class="iconfont icon-dui"></icon>
					0
				</view>
				<view class="li">
					<icon class="iconfont icon-cuowu"></icon>
					0
				</view>
				<view class="li">
					<icon class="iconfont icon-caidan"></icon>
					{{tabIndex+1}}<text>/{{newsitems.length}}</text>
				</view>
			</view>
			
		</view>
		<!-- 底部遮罩弹出层 -->
		<view v-if="animation_warp_onoff" class="animation_warp" @tap="animation_top_bottom">
			<view class="animation_prop" :animation="animationData" @tap.stop="" >
				<!-- 底部相同部分 -->
				<view class="bottom">
					<view class="left">
						<icon class="iconfont icon-shoucang1"></icon>
						收藏
					</view>
					<view class="right">
						<view class="li">
							<icon class="iconfont icon-dui"></icon>
							0
						</view>
						<view class="li">
							<icon class="iconfont icon-cuowu"></icon>
							0
						</view>
						<view class="li">
							<icon class="iconfont icon-caidan"></icon>
							{{tabIndex+1}}<text>/{{newsitems.length}}</text>
						</view>
					</view>
				</view>
					<!-- 滚动视图 -->
				<scroll-view  scroll-y style="background: white;border-top:1px solid #E4E4E4 ;"  scroll-into-view="red" scroll-top="0">
					<view class="scroll_view">
						<view class="scroll-view-item bc_green" v-for="(item,index) in newsitems.length" @tap="select_pages(index)" :class="{active:index==tabIndex}">{{index+1}}</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
		
    </view>
</template>
<script>
    export default {
        data() {
            return {
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
                tabIndex: 0,//当前显示第几页
				newsitems:[],//所有页题目数据
				current_page_data:[],//当前页数据
				
				animationData: {},//动画
				animation_warp_onoff:false,//遮罩动画
            }
        },
        onLoad: function() {
			//获取所有题目数据
			this.get_ubject_data()
			//获取指定第一页页数数据
			// this.get_num_data(5857)
        },
		// 监听下拉刷新
		onPullDownRefresh(){
			setTimeout(function () {
				uni.stopPullDownRefresh();//停止刷新
			}, 1000);
		},
        methods: {
			//获取所有题目数据
			get_ubject_data(){
				let that=this
				that.GLOBAL.doGet('/getAll',{},function(res){
					console.log(res)
					for(let a=0;a<res.length;a++){
						res[a].item=JSON.parse(res[a].item)
					}
					that.newsitems=res
				},function(erro){
					console.log(erro)
				})
			},
			//获取指定页数数据
			get_num_data(num){
				let that=this
				that.GLOBAL.doGet('/getJson/'+num,{},function(res){
					console.log(res)
					res.item=JSON.parse(res.item)
					that.current_page_data=res
					console.log(that.current_page_data)
				},function(erro){
					console.log(erro)
				})
			},
			//从下往上的动画
			animation_bottom_top(){
				//创建一个动画实例
				var animation = uni.createAnimation({
					duration: 500,//动画持续时间，单位ms
					timingFunction: 'ease',//"linear"默认	定义动画的效果动画ease以低速开始，然后加快，在结束前变慢
				})
				this.animation = animation
				animation.bottom(0).step()
	
				this.animationData = animation.export()
				//禁止下拉刷新
				this.GLOBAL.switchPullRefresh(false)
			},
			//从上往下的动画
			animation_top_bottom(e){
				//创建一个动画实例
				var animation = uni.createAnimation({
					duration: 500,//动画持续时间，单位ms
					timingFunction: 'ease',//"linear"默认	定义动画的效果动画ease以低速开始，然后加快，在结束前变慢
				})
				this.animation = animation
				animation.bottom(-900).step()
	
				this.animationData = animation.export()
				setTimeout(()=>{
					//关掉遮罩
					this.animation_warp_onoff=false
				},500)
				//启用下拉刷新
				this.GLOBAL.switchPullRefresh(true)
			},
			show(){
				//打开遮罩
				this.animation_warp_onoff=true
				// 启动动画
				setTimeout(()=>{
					this.animation_bottom_top()
				},100)
				
			},
			//选择题
			checkboxChange(e){
				let that=this
				console.log(JSON.stringify(e.detail.value))
				var values = e.detail.value;//我选择后的答案
				for (var i = 0; i < that.newsitems.length; ++i) {
					for(var k=0;k<that.newsitems[i].item.length;k++){
						(that.newsitems[i].item)[k].checked = "false";
						
						for (var j = 0;j < values.length; ++j) {
							if ((that.newsitems[i].item)[k].value == values[j]) {
								(that.newsitems[i].item)[k].checked = "true";
								break
							}
						}
					}
				}
				console.log(that.newsitems)
			},
			//选取弹出层的页数
			select_pages(page_num){
				console.log(page_num)
				//关闭弹出层
				//从上往下的动画
				this.animation_top_bottom()
				this.tabIndex = page_num;
			},
            async changeTab(e) {
                let index = e.target.current;
				console.log(index)
                this.tabIndex = index; //一旦访问data就会出问题
				
				let num=5857+index
				console.log(num)
				//获取指定页数数据
				// this.get_num_data(num)
            },
            getElSize(id) { //得到元素的size
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
        }
    }
</script>

<style scoped="scoped" lang="scss">
@import"./exam_practice.scss";
</style>